<template>
  <div>
    <div id="cesiumContainer" />
    <div class="content-left" :class="{'close-content-left':leftVisible}">
      <test111 :dialog-visible="true" class="margin_bottom_6" size="small" :title="dialog1.dialogTitle">
        <div v-for="(item,index) in list" :key="index" class="margin_bottom_6">
          <div flex="main:justify cross:center" class="text_white font_size_mini">{{ item.name }} <span class="font_size_20">{{ item.value }}</span></div>
          <el-progress :text-inside="true" :format="percentage=>'多余'" :percentage="item.percentage" :status="colorArr[index]||'success'" />
        </div>
      </test111>
      <!-- <div v-if="!dialog1.dialogVisible" class="btn" style="position:absolute;top:0;" @click="dialog1.dialogVisible = true"><i class="el-icon-d-arrow-right" /></div> -->
      <test111 :dialog-visible="true" class="margin_bottom_6" size="small" :title="dialog2.dialogTitle" transition-name="fade-right">
        <div v-for="(item,index) in 4" :key="index" class="margin_bottom_6" flex="main:justify cross:center">
          <div class="imgbox"><img :src="imgArr[index]" width="100%" alt=""></div>
          <div class="textbox text_white" style="flex:1">
            <h4 class="margin_bottom_12 text-warning">VM0038</h4>
            <p class="font_size_mini">2019-10-19 10:47:44</p>
          </div>
          <el-button :type="index % 2?'success':'danger'" circle>{{ index % 2?'入':'出' }}</el-button>
        </div>
      </test111>
      <test111 :dialog-visible="true" size="small" :title="dialog3.dialogTitle" transition-name="fade-right">
        <line-chart :chart-data="lineChartData" />
      </test111>
      <button class="slide-btn left" style="" @click="leftVisible = !leftVisible"><i class="el-icon-d-arrow-left" :class="{rotate:leftVisible}" /></button>
    </div>
    <div class="content-right" :class="{'close-content-right':rightVisible}">
      <test111 :dialog-visible="true" size="small" class="margin_bottom_6" :title="dialog4.dialogTitle">
        <div class="line_height_28" flex="main:justify cross:center">
          <p class="font_size_12 text_999 width_60">标题</p>
          <p class="font_size_12 text_999">位置</p>
          <p class="font_size_12 text_999">时间</p>
          <p class="font_size_12 text-warning">状态</p>
          <p class="font_size_12 text_success">详情</p>
        </div>
        <transition-group appear tag="ul" name="list" style="height: 170px;overflow: hidden;">
          <li v-for="item in sirenList||7" :key="item[1]" class="line_height_28" flex="main:justify cross:center">
            <p class="font_size_12 text_999" :class="colorObj[item[4]]">{{ item[0] }}</p>
            <p class="font_size_12 text_999">防区{{ item[1] }}</p>
            <p class="font_size_12 text_999">{{ item[2] }}</p>
            <p class="font_size_12" :class="!item[3]? 'text_success':'text_danger'">{{ !item[3] && '已处理' || '未处理' }}</p>
            <p><el-link type="primary" class="font_size_12" @click="$EventBus.$emit('openDialog', { name: '详细信息' })">查看</el-link></p>
          </li>
        </transition-group>
      </test111>
      <test111 :dialog-visible="true" size="small" class="margin_bottom_6" :title="dialog5.dialogTitle">
        <h6 class="text_white line_height_32 margin_bottom_6 text_success" style="border-bottom:1px solid #ccc">出入口实时人脸对比</h6>
        <div class="margin_bottom_12 text_white"><i class="el-icon-location" />正门人行通道入口</div>
        <div flex="main:justify cross:center">
          <div style="width:30%"><img width="100%" src="@/assets/people.jpg" alt="" srcset=""></div>
          <div style="width:30%"><el-progress :width="100" type="circle" :percentage="25" /></div>
          <div style="width:30%"><img width="100%" src="@/assets/people.jpg" alt="" srcset=""></div>
        </div>
        <div class="text_white margin_bottom_12" flex="main:justify cross:center">
          <span>姓名：老铁</span>
          <span>时间：2019-4-19 18:45:32</span>
        </div>
        <h6 class="text_white line_height_32 margin_bottom_6 text_success" style="border-bottom:1px solid #ccc">今日小区出入记录</h6>
        <div flex style="flex-wrap: wrap;">
          <div v-for="(item,index) in 8" :key="index" class="line_height_28 text_align_center" style="width:25%;">
            <h5 class="text_999">{{ peopleTypes[index] }}</h5>
            <h3 class="text_white">261</h3>
          </div>
        </div>
      </test111>
      <test111 :dialog-visible="true" size="small" class="margin_bottom_6" :title="dialog6.dialogTitle">
        <div flex="main:justify cross:center">
          <div v-for="(item,index) in 4" :key="index" class=" text_align_center" style="width:25%;">
            <h5 class="text_999">{{ deviceTypes[index] }}</h5>
            <h3 class="text_white">261</h3>
          </div>
        </div>
      </test111>
      <button class="slide-btn right" style="" @click="rightVisible = !rightVisible"><i class="el-icon-d-arrow-right" :class="{rotate:rightVisible}" /></button>
    </div>

    <!-- <div style="position:fixed;bottom:0;min-height:417px;margin:10px;width:30%">
      <test111 v-model="dialog3.dialogVisible" size="small" :title="dialog3.dialogTitle" icon="el-icon-d-arrow-left">
        <div v-for="(item,index) in list" :key="index" class="margin_bottom_6">
          <div flex="main:justify cross:center" class="text_white">{{ item.name }} <span class="font_big">{{ item.value }}</span></div>
          <el-progress :text-inside="true" :format="percentage=>'多余'" :percentage="item.percentage" :status="colorArr[index]" />
        </div>
      </test111>
      <div v-if="!dialog3.dialogVisible" class="btn" style="position:absolute;top:0;" @click="dialog3.dialogVisible = true"><i class="el-icon-d-arrow-right" /></div>
    </div>
    <div style="position:fixed;bottom:0;min-height:417px;right:0;margin:10px;width:30%">
      <test111 v-model="dialog4.dialogVisible" :title="dialog4.dialogTitle" icon="el-icon-d-arrow-right" transition-name="fade-right"><pie-chart /></test111>
      <div v-if="!dialog4.dialogVisible" class="btn" style="position:absolute;right:0;top:0;" @click="dialog4.dialogVisible = true"><i class="el-icon-d-arrow-left" /></div>
    </div> -->
    <!-- <div style="position:fixed;top:60px;margin:10px;width:30%"></div> -->
    <!-- <test111 v-model="dialog2.dialogVisible" class=" slideInLeft animated" style="position:fixed;top:60px;right:0;margin:10px;width:30%"><bar-chart /></test111>
    <test111 v-model="dialog3.dialogVisible" class=" slideInLeft animated" style="position:fixed;bottom:0;left:0;margin:10px;width:30%"><Raddar-chart /></test111>
    <test111 v-model="dialog4.dialogVisible" class=" slideInLeft animated" style="position:fixed;bottom:0;right:0;margin:10px;width:30%"><pie-chart /></test111> -->
  </div>
</template>
<script>
/* eslint-disable no-undef */
// import RaddarChart from './components/RaddarChart'
import LineChart from './components/LineChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
// import dialog111 from '@/components/dialog'
import test111 from '@/components/test'
// import customTable from '@/components/customTable'
// import { queryAlarm } from '@/api/home'
const lineChartData = {
  newVisitis: {
    expectedData: [[new Date(2019, 5, 9, 6), 2], [new Date(2019, 5, 9, 7), 3], [new Date(2019, 5, 9, 8), 9], [new Date(2019, 5, 9, 9), 65], [new Date(2019, 5, 9, 10), 67], [new Date(2019, 5, 9, 11), 69], [new Date(2019, 5, 9, 12), 20], [new Date(2019, 5, 9, 13), 15]]
    // actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
// RaddarChart, PieChart, BarChart, dialog111, LineChart, test111, customTable
export default {
  name: 'CesiumContainer',
  components: { LineChart, test111 },
  data() {
    return {
      dialog1: {
        dialogVisible: true,
        dialogTitle: '一标六实'
      },
      dialog2: {
        dialogVisible: true,
        dialogTitle: '停车管理'
      },
      dialog3: {
        dialogVisible: true,
        dialogTitle: '车辆分析'
      },
      dialog4: {
        dialogVisible: true,
        dialogTitle: '实时报警'
      },
      dialog5: {
        dialogVisible: true,
        dialogTitle: '实时人口数据'
      },
      dialog6: {
        dialogVisible: true,
        dialogTitle: '设备列表'
      },
      leftVisible: false,
      rightVisible: false,
      list: [
        {
          name: '实有人口',
          value: '5741',
          percentage: 45
        },
        {
          name: '实有房屋',
          value: '2732',
          percentage: 78
        },
        {
          name: '实有单位',
          value: '1',
          percentage: 23
        },
        {
          name: '实有安防设施',
          value: '535',
          percentage: 29
        },
        {
          name: '实有力量与装备',
          value: '177',
          percentage: 74
        },
        {
          name: '实有警情事件',
          value: '593',
          percentage: 96
        }
      ],
      peopleTypes: ['进入人员', '离开人员', '已登记人员', '未登记人员', '进入车辆', '离开车辆', '已登记车辆', '未登记车辆'],
      deviceTypes: ['智能手环', '智能手表', '智能手机', '智能手链'],
      colorArr: ['success', 'warning', 'exception', '', 'exception', ''],
      imgArr: [require('@/assets/car1.jpg'), require('@/assets/car2.jpg'), require('@/assets/car3.jpg'), require('@/assets/car4.jpg')],
      lineChartData: lineChartData.newVisitis,
      tableList: [],
      tableColumns: [
        { prop: 'username', hearderLabel: '设备型号' },
        { prop: 'roleName', hearderLabel: '所在位置' },
        { prop: 'organization', hearderLabel: '当前状态' }
      ],
      lastColumnConfig: {
        headerLabel: '操作',
        headerAlign: 'right',
        width: '400px'
      },
      sirenList: [],
      colorObj: {
        0: 'text_999',
        1: 'text-warning',
        2: 'text_danger'
      }
    }
  },
  created() {
    this.sirenList = Array.from({ length: 6 }).map((item, index) => (['防区通信异常', index, '18:24:36', 0, index % 3])).reverse()
  },
  mounted() {
    var viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url:
          'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        enablePickFeatures: false
      }),
      infoBox: false,
      // selectionIndicator : false,
      shadows: true,
      shouldAnimate: true,
      animation: false, // 是否创建动画小器件，左下角仪表
      baseLayerPicker: false, // 是否显示图层选择器
      fullscreenButton: false, // 是否显示全屏按钮
      geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
      homeButton: false, // 是否显示Home按钮
      sceneModePicker: false, // 是否显示3D/2D选择器
      selectionIndicator: false, // 是否显示选取指示器组件
      timeline: false, // 是否显示时间轴
      navigationHelpButton: false, // 是否显示右上角的帮助按钮
      scene3DOnly: false // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    })
    viewer._cesiumWidget._creditContainer.style.display = 'none'
    var tileset = new Cesium.Cesium3DTileset({
      url: 'Model3d/3dtiles/hangzhou/tileset.json',
      maximumScreenSpaceError: 2, // 最大的屏幕空间误差
      maximumNumberOfLoadedTiles: 500 // 最大加载瓦片个数
    })
    var lanhaitileset = new Cesium.Cesium3DTileset({
      url: 'Model3d/3dtiles/lanhaitiles/tileset.json',
      maximumScreenSpaceError: 2, // 最大的屏幕空间误差
      maximumNumberOfLoadedTiles: 100 // 最大加载瓦片个数
    })
    const params = {
      tx: 120.1087319, // 模型中心X轴坐标（经度，单位：十进制度）
      ty: 30.28205, // 模型中心Y轴坐标（纬度，单位：十进制度）
      tz: 8, // 模型中心Z轴坐标（高程，单位：米）
      rx: 0, // X轴（经度）方向旋转角度（单位：度）
      ry: 0, // Y轴（纬度）方向旋转角度（单位：度）
      rz: -90 // Z轴（高程）方向旋转角度（单位：度）
    }

    tileset.readyPromise
      .then(function(tileset) {
        viewer.scene.primitives.add(tileset)
      })
      .otherwise(function(error) {
        console.log(error)
      })
    lanhaitileset.readyPromise
      .then(function() {
        viewer.scene.primitives.add(lanhaitileset)
      })
      .then(() => {
        if (lanhaitileset._root.transform === undefined) {
          console.log('瓦片未变换')
        }
        lanhaitileset._root.transform = this.update3dtilesMaxtrix(params)
        // viewer.zoomTo(lanhaitileset);
      })
      .otherwise(function(error) {
        console.log(error)
      })
    // eslint-disable-next-line new-cap
    var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0)
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(120.1087319, 30.28205, 100.0),
      orientation: initialOrientation,
      endTransform: Cesium.Matrix4.IDENTITY,
      duration: 6,
      complete: function() {
        //     viewer.zoomTo(lanhaitileset);
        //     var videoElement = document.getElementById('v1');
        //     var video = viewer.entities.add({
        //         polygon: {
        //             hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([114.25, 30.34, 114.30, 30.34, 114.30, 30.36, 114.25, 30.36])),
        //             classificationType: Cesium.ClassificationType.BOTH,
        //             material : videoElement
        //         }
        //     });
        // // viewer.zoomTo(video);
      }
    })
    this._timer = setInterval(this.open, 10000)
  },
  destroyed() {
    clearInterval(this._timer)
  },
  methods: {
    open(message = '我是报警信息我是报警信息我') {
      this.$notify({
        title: '防区通信异常',
        dangerouslyUseHTMLString: true,
        position: 'bottom-right',
        message: `<strong>${message}</strong>`,
        type: 'warning',
        onClick: () => {
          this.$EventBus.$emit('openDialog', { name: '详细信息' })
        }
      })
      const arr = JSON.parse(JSON.stringify(this.sirenList))
      arr.pop()
      arr.unshift(['防区通信异常', arr[0][1] + 1, '18:24:36', Math.round(Math.random()), Math.round(Math.random() * 3)])
      this.sirenList = arr
      // queryAlarm().then(res => {
      //   console.log(res)
      //   const arr = JSON.parse(JSON.stringify(this.sirenList))
      //   arr.pop()
      //   arr.unshift(['防区通信异常', arr[0][1] + 1, '18:24:36', Math.round(Math.random()), Math.round(Math.random() * 3)])
      //   this.sirenList = arr
      // })
    },
    update3dtilesMaxtrix(params) {
      // 旋转
      const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx))
      const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry))
      const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz))
      const rotationX = Cesium.Matrix4.fromRotationTranslation(mx)
      const rotationY = Cesium.Matrix4.fromRotationTranslation(my)
      const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz)
      // 平移
      const position = Cesium.Cartesian3.fromDegrees(
        params.tx,
        params.ty,
        params.tz
      )
      const m = Cesium.Transforms.eastNorthUpToFixedFrame(position)
      const scale = Cesium.Matrix4.fromUniformScale(0.85)
      // //缩放
      Cesium.Matrix4.multiply(m, scale, m)
      // 旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m)
      Cesium.Matrix4.multiply(m, rotationY, m)
      Cesium.Matrix4.multiply(m, rotationZ, m)
      // 赋值给tileset
      return m
    },
    handlePageChange(obj) {
      const arr = new Array(obj.pageSize).fill(null).map((item, index) => ({
        username: '型号' + ((obj.currentPage - 1) * obj.pageSize + index),
        roleName: '楼顶左上角',
        organization: '运行中'
      }))
      console.log(this.activePath)

      this.loading = true
      new Promise(resolve => {
        setTimeout(() => resolve({ data: arr, total: 25 }), 500)
      }).then(res => {
        this.tableList = res.data
        // obj.total = res.total
        this.loading = false
      })
    }
  }
}
</script>
<style>
.list-enter-active, .list-leave-active {
  transition: all 2s;
}
.list-enter
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(-30px);
}
.list-leave-to{
  opacity: 0;
  transform: translateY(30px)
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100%;
}
.cesium-widget-credits {
  display: none !important;
}
.content-left{
  position:fixed;
  top:60px;
  left:0;
  margin-left:10px;
  margin-top:6px;
  transition: all 1s;
  &.close-content-left{
    transform: translateX(-360px);
  }
  .imgbox{
    width: 100px;
    height: 50px;
    overflow: hidden;
    margin-right: 10px;
    border:1px solid #fff
  }
}
.content-right{
  position:fixed;
  top:60px;
  right:0;
  margin-right:10px;
  margin-top:6px;
  transition: all 1s;
  &.close-content-right{
    transform: translateX(360px);
  }
}
.slide-btn{
    position: absolute;;
    top:calc(50% - 60px);
    background:transparent;
    border-width: 1px;
    color:#fff;
    padding: 20px 5px;
    transform: translateY(-50%);
    background: forestgreen;
    outline: none;
    border-radius: 4px;
    &.left{
      left: 100%;
    }
    &.right{
      right: 100%;
    }
    .el-icon-d-arrow-left{
      transition: all 1s;
      &.rotate{
        transform: rotate(180deg);
      }
    }
    .el-icon-d-arrow-right{
      transition: all 1s;
      &.rotate{
        transform: rotate(180deg);
      }
    }
  }
</style>
